<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>局部组件</title>
	</head>
	<body>
		<h1>局部组件</h1>
		<div id="app">
			<hello-com></hello-com>	
			<hello-com></hello-com>	
		</div>	
		<div id="app2">
			<hello-com></hello-com>	
			<hello-com></hello-com>	
		</div>	
			
			<!-- 定义组件的模版html 
					 注意事项: 
							1.切记标识在app之外!!!!
							2.要求模版字符串必须有根标签 div		
			-->
		<template id="helloTem">
			<div>
				<h1>我是局部组件Aaaaaaaaaaaaaaaaaaaaaaaa</h1>
				{{msg}}
			</div>
		</template>
			
		
		
		<!-- 引入JS文件 -->
		<script src="../js/vue.js"></script>
		<script>
			/* 只能在某个Vue的对象之内,使用组件标签 */
			let helloCom ={
				data(){return{
					msg: "我是局部组件"
				}},
				template: "#helloTem"
			}
			
			const app = new Vue({
				el:	"#app",
				data: {
				},
				components:{
					//key 组件key:组件体
					//helloCom: helloCom,
					//如果k,v相同,那么js可以简化为key
					helloCom
					
				}
			})
		</script>
	</body>
</html>